<!--设备告警详情-->
<template>
  <view>
    <!--每一项-->
    <view class="order" v-for="(item, index) in sbgjListData" :key="item.id">
      <view class="cu-list">
        <view class="cu-item cugrid">
          <view class="content" @click="gajin(item)">
            <view class="text-grey textgr"
              >告警类别:
              <text class="cuIcon-title text-orange">{{type[item.type]}}</text>
            </view>
            <view class="text-grey textgr"
              >告警来源:
              <text class="cuIcon-title text-orange">{{
                item.sourceName
              }}</text>
            </view>
            <view class="text-grey textgr"
              >告警时间:
              <text class="cuIcon-title text-orange">{{
               parseInt(item.waringTime) | dateFormat  
              }}</text>
            </view>
            <view class="text-grey textgr"
              >矿山企业:
              <text class="cuIcon-title text-orange">{{
                item.enterpriseName
              }}</text>
            </view>
          </view>
          <view>
            <view>
              <u-button
                type="error"
                shape="circle"
                size="small"
                :plain="true"
              >{{warn_handle_state[item.handleState]}}</u-button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!--- unAPP官网组件日期选择器上拉弹出框-->
    <view>
      <u-popup
        :show="show"
        mode="top"
        @close="close"
        @open="open"
        style="padding: 34px 15px 17px 15px"
      >
        <!--时间选择-->
        <view>
          <view class="example-body">
            <uni-datetime-picker
              type="date"
              :clear-icon="false"
              v-model="single"
              @maskClick="maskClick"
            />
          </view>
        </view>

        <!--市区联动-->
        <view class="container" style="padding:0 24px;margin-top: 20px;">
        	<uni-section title="" type="line" padding style="height: calc(100vh - 100px);">
        		<uni-data-picker ref="clearCity" placeholder="请选择所在地区" popup-title="请选择所在地区" :localdata="dataTree"
        			v-model="classes" @change="onchange" @popupopened="onpopupopened"
        			@popupclosed="onpopupclosed">
        		</uni-data-picker>
        	</uni-section>
        </view>
        <!--矿山企业-->
        <view style="padding: 5px 24px">
          <u--form
            labelPosition="left"
            :model="model1"
            u-form="false"
            ref="form1"
            style=""
          >
            <u-form-item
              prop="userInfo.sex"
              borderBottom
              @click="
                showSex = true;
              "
              ref="item1"
            >
              <u--input
                v-model="model1.userInfo.sex"
                borderBottom="false"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择矿山企业"
              ></u--input>
              <!-- 	<u-icon slot="right" name="arrow-right"></u-icon> -->
            </u-form-item>
          </u--form>
          <u-action-sheet
            :show="showSex"
            :actions="actions"
            title="请选择矿山企业"
						v-model="qy"
            @close="showSex = false"
            @select="sexSelect"
          >
          </u-action-sheet>
        </view>
        <view style="padding: 5px 24px">
          <view class="button-sp-area" style="text-align: center">
            <button
              class="mini-btn btncas-one"
              @click="btnCancel()"
              type="default"
              size="mini"
            >
              取消
            </button>
            <button class="mini-btn btncas" type="warn" size="mini" @click="searchval">
              查询
            </button>
          </view>
        </view>
      </u-popup>

      <!-- <u-button @click="show = true">打开</u-button> -->
    </view>
  </view>
</template>

<script>
import { sbgjList } from "@/api/sj/sbgj.js";
import { cityList } from "@/api/sj/city.js";
import { mapState } from 'vuex'//引入mapState
export default {
  data() {
    return {
			dataList:{
				city:"",
				date:"",
				enterpriseName:"",
				district:'',
			},
			qy:0,
			value:0,
      sbgjListData: [],
      warnId: null,
      // 下拉框选择企业
      showSex: false,
      model1: {
        userInfo: {
          name: "uView UI",
          sex: "",
        },
      },
      actions: [],

      radio: "",
      switchVal: false,
      //

      single: "",
      classes: "",
      dataTree: [],
      // 下拉框选择企业完

      datetimesingle: "",

      datetimerange: [],
      start: Date.now() - 1000000000,
      end: Date.now() + 1000000000,

      show: false,
     
    };
  },

  //注意函数和data同级,不要写在methods内
  onNavigationBarButtonTap(e) {
    this.show = true;
		this.actions = []
		this.dataList.enterpriseName = ""
		this.model1.userInfo.sex = ""
    // this.$tab.navigateTo('/pages/my/setting/index')

  },
  watch: {
    datetimesingle(newval) {
      // console.log("单选:", this.datetimesingle);
    },
    range(newval) {
      console.log("范围选:", this.range);
    },
    datetimerange(newval) {
      // console.log("范围选:", this.datetimerange);
    },
  },

  onLoad() {
      this.getSbgjList();
  },
	computed: {
				...mapState({
					type: state => state.sjzd.sjzdList.alarm_type,
					warn_handle_state: state => state.sjzd.sjzdList.warn_handle_state,
				})
			},


  methods: {
		// 查询
		searchval(){
		this.dataList.date = this.single
		let data = this.dataList
		this.getSbgjList(data)
		this.show = false
			this.$refs.clearCity.clear()
		},
    open() {
      // console.log('open');
    },
    close() {
      this.show = false;
      
    },
    change(e) {
      this.single = e;
      console.log("change事件:", (this.single = e));
    },
    changeLog(e) {
      console.log("change事件:", e);
    },
    maskClick(e) {
      console.log("maskClick事件:", e);
    },

    // 市区联动js
    
    onpopupopened(e) {
      	this.getCityList();
    },
    onpopupclosed(e) {
      console.log("popupclosed");
    },
    onchange(e) {
      console.log("onchange:", e.detail.value);
			
			this.dataList.city = e.detail.value[0].value
			this.dataList.district = e.detail.value[1].value
			let {city,district} = this.dataList
			 this. getSbgjList({city:city,district:district})
    },
    // 下拉框选择企业
    sexSelect(e) {
			this.dataList.enterpriseName = e.name
      this.model1.userInfo.sex = e.name;
      this.$refs.form1.validateField("userInfo.sex");
    },
    gajin(item) {
      this.warnId = item.id;
      uni.navigateTo({
				url:`/pages/work/workdetails/index?id=${this.warnId}`
			});
    },
    btnCancel() {
      this.show = false;
    },

    // 设备告警数据
    getSbgjList(data) {
      sbgjList(data)
        .then((result) => {
          const data = result.data;
          this.sbgjListData = data;
					this.actions = data.map((item,index)=>{
						return {
							value:index,
							name:item.enterpriseName
						}
					})
					// console.log(this.actions)
        })
        .catch((err) => {
        });
    },
		
		// 城市数据
		getCityList() {
		  cityList()
		    .then((result) => {
		      const data = result.data;
					this.dataTree = data.map((item)=>{
						return{
							value:item.zoningCode,
							text:item.name,
							children:item.city.map((item1,index1)=>{
								return{
									value:item1.zoningCode,
									text:item1.name
								}
							})
						}
					})
					
		    })
		    .catch((err) => {
		      console.log(err);
		    });
		},
  },
};
</script>

<style lang="scss" scoped>
.order {
  width: 710rpx;
  background-color: #ffffff;
  margin: 20rpx auto;
  border-radius: 16rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;
  letter-spacing: 2rpx;
  box-shadow: 0px 3px 10px 0px rgba(148, 177, 188, 0.38);
}

.page {
  height: 100vh;
  width: 100vw;
}

.cu-list.menu-avatar > .cu-item {
  position: relative;
  display: flex;
  padding-right: 10rpx;
  height: 380rpx;
  background-color: #ffffff;
  justify-content: flex-end;
  align-items: center;
  margin-top: 30rpx;
  border-radius: 30rpx;
}

.cu-list.menu-avatar > .cu-item[data-v-0b41208f] {
  position: relative;
  display: flex;
  padding-right: 10rpx;
  height: 380rpx;
  background-color: #ffffff;
  justify-content: flex-end;
  align-items: center;
  margin-top: 30rpx;
  border-radius: 30rpx;
}

.cu-list.menu-avatar > .cu-item .content {
  position: absolute;
  left: 0px;
  width: calc(100% - 52px - 33px - 66px - 11px);
  line-height: 1.6em;
}

.text-grey,
.line-grey,
.lines-grey {
  color: #848484;
}

.text-orange,
.line-orange,
.lines-orange {
  color: #343434;
}

.cu-list > .cu-item {
  transition: all 0.6s ease-in-out 0s;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.textgr {
  line-height: 48rpx;
}

.cugrid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.example-body {
  background-color: #fff;
  padding: 10px;
}

.title {
  font-size: 14px;
  font-weight: bold;
  margin: 20px 0 5px 0;
}

.data-pickerview {
  height: 400px;
  border: 1px #e5e5e5 solid;
}

.popper__arrow {
  top: -6px;
  left: 50%;
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
}

.popper__arrow {
  top: -6px;
  left: 50%;
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
}

.u-form-item__body {
  display: flex;
  flex-direction: row;
  padding: 4px 0;
  border: 1px solid #e5e5e5;
}

.example-body {
  background-color: #fff;
  padding: 22px 25px 18px 25px;
}
.btncas-one {
  display: inline-block;
  line-height: 2.3;
  color: #225ea4;
  font-size: 13px;
  padding: 0 1.34em;
  border: 1px solid #225ea4;
  margin: 0px 10px 8px 10px;
}
.btncas {
  display: inline-block;
  line-height: 2.3;
  font-size: 13px;
  padding: 0 1.34em;
  background-color: #225ea4;
  border: 1px solid #225ea4;
  margin: 0px 10px 8px 10px;
}
</style>
